@import '../abstracts/variables';

.mud-radio {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  color: var(--mud-palette-action-default);

  & > .mud-radio-content {
    color: var(--mud-palette-text-primary);
  }

  @media(hover: hover) and (pointer: fine) {
    .mud-disabled:hover {
      cursor: default;
      background-color: transparent !important;

      & > .mud-radio-content {
        color: var(--mud-palette-text-disabled);
      }

      & * {
        cursor: default;
        color: var(--mud-palette-text-disabled);
      }
    }
  }

  &.mud-disabled, .mud-disabled:focus-visible, .mud-disabled:active {
    cursor: default;
    background-color: transparent !important;

    & > .mud-radio-content {
      color: var(--mud-palette-text-disabled);
    }

    & * {
      cursor: default;
      color: var(--mud-palette-text-disabled);
    }
  }

  &.mud-readonly, .mud-readonly:hover {
    cursor: default;
    background-color: transparent !important;
  }

  & .mud-radio-dense {
    padding: 4px;
  }

  &.mud-checked {
    color: var(--mud-palette-action-default);

    @media(hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--mud-palette-action-default-hover);
      }
    }
  }
}

.mud-radio-button {
  width: 100%;
  display: flex;
  align-items: inherit;
  justify-content: inherit;

  & .mud-radio-input {
    top: 0;
    left: 0;
    width: 100%;
    cursor: inherit;
    height: 100%;
    margin: 0;
    opacity: 0;
    padding: 0;
    z-index: 1;
    position: absolute;
  }

  & .mud-radio-icons {
    display: flex;
    position: relative;
  }
}


.mud-radio-icons.mud-checked .mud-radio-icon-checked {
  transform: scale(1);
  transition: transform 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}

.mud-radio-icon-checked {
  left: 0;
  position: absolute;
  transform: scale(0);
  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
}

.mud-radio-content-placement- {
  &start {
    margin-right: -11px;
    margin-inline-end: -11px;
    flex-direction: row-reverse;

    &.mud-radio-with-content {
      margin-left: 16px;
      margin-inline-start: 16px;
    }
  }

  &end {
    margin-left: -11px;
    margin-inline-start: -11px;
    flex-direction: row;

    &.mud-radio-with-content {
      margin-right: 16px;
      margin-inline-end: 16px;
    }
  }

  &top {
    margin-inline-end: unset;
    flex-direction: column-reverse;

    &.mud-radio-with-content {
      margin-left: 16px;
      margin-inline-start: 16px;
    }
  }

  &bottom {
    margin-inline-end: unset;
    flex-direction: column;

    &.mud-radio-with-content {
      margin-left: 16px;
      margin-inline-start: 16px;
    }
  }
}
